<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
</head>

<body>
    <!-- 头部 -->
    <div id='big'>
        <div id='container'>
            <img src="../images/loge.jpg" alt="">
            <div class="titie">
                <p>熊 猫 优 选</p>
                <span>XIONG MAO YOU XUAN</span>
            </div>
            <div class="text">
                <input type="text" placeholder="    搜索商品，发现更多优惠">
                <div>搜索</div>
            </div>
            <div class="font"><img src="../images/test.jpg" alt=""></div>
        </div>
    </div>
    <!-- 导航 -->
    <div id="navigation">
        <div id='container'>
            <div class="menu">
                <div class='active'>首页</div>
                <div class='a'>9块9包邮</div>
                <div class="b">超值大额券</div>
                <div class="c">降温急救穿搭</div>
            </div>
        </div>
    </div>
    <!-- 产品分类 -->
    <div id="product">
        <div id='container'>
            <!-- 左边 -->
            <div class='listLeft'>
                <ul>
                    <li>女装/女鞋</li>
                    <li>男装/男鞋</li>
                    <li>美妆/个护</li>
                    <li>配饰/箱包</li>
                    <li>零食王国</li>
                    <li>母婴用品</li>
                    <li>手机/数码</li>
                    <li>内衣袜子</li>
                    <li>文娱/家居</li>
                </ul>
            </div>
            <!-- 右边 -->
            <div class="listRight">
                <!-- 上 -->
                <div class="listRight-t">
                    <!-- 轮播图 -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                  
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>

                    <!-- 图片 右-->
                    <div class="listRight-t-r">
                        <div class='r-nine'>
                            <h3>9块9包邮</h3>
                            <p>&emsp;保你不吃亏</p>
                        </div>
                        <div class="r-img"><img src="../images/list04.jpg" alt=""></div>
                    </div>
                </div>
                <!-- 下 -->
                <div class="listRight-b">
                    <div class="a">
                        <div class='a-left'>
                            <h3>降温急救穿搭</h3>
                            <p>速来抢购</p>
                            <div class="go">Go</div>
                        </div>
                        <div class="a-right"><img src="../images/list02.jpg" alt=""></div>
                    </div>
                    <div class="b">
                        <div class='b-left'>
                            <h3>超值大额券</h3>
                            <p>优惠直击低价</p>
                            <div class="go">Go</div>
                        </div>
                        <div class="b-right"><img src="../images/list03.jpg" alt=""></div>
                    </div>

                    <div class="c">
                        <div class='c-left'>
                            <h3>扫码下载APP</h3>
                            <p>发现更多惊喜</p>
                        </div>
                        <div class="c-right"><img src="../images/list05.png" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- 小编精选 -->
    <div id="select">
        <div id='container'>
            <p>小编精选</p>
            <span>每天更新</span>
        </div>

    </div>
    <!-- 商品列表 -->
    <div id="product-list">
        <div id="container">
          <div class='ulProduct'>
              <!-- js动态生成li -->
            <ul class="product-list-li">  
            </ul>
          </div>
            <div class="click"><p>加载更多</p></div>
                   
                <!-- </div> -->
            <!-- </div> -->
        </div>
        <div class='footer'>
            
            <div class="footer-t">
                <div class="foot-font"><img src="../images/icon.png" alt=""></div>
                <div class="foot-text">
                    <h3>熊猫优选</h3>
                    <p>年轻人网购首选<br>购物领券更省钱</p>

                </div>
                <div class="foot-download">| 下载APP</div>
            </div>
            <div class="footer-b">
                <p>
                    浙公安网备案 330106020099049 | ICP备案号 ：浙ICP备 17012864 |
                </p>
            </div>
        </div>
    </div>
    <div class="back-top">
        <img src="../images/top.png" alt="" class="top-img">
    </div>
    
    <script src="../js/util.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
   

</body>

</html>